<template>
  <!-- 积分设置 -->
  <div class="add-group">
    <div class="action">
      <div class="item flex-center" @click="onCancel">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>积分设置</span>
      </div>
      <div class="item send flex-center" @click="onConfirm">
        <span>完成</span>
      </div>
    </div>
    <div class="input">
      <div class="input-title">{{ memberInfo.fromAccountNick }}</div>
      <cube-input v-model="score" type="number" placeholder="请填写积分数" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import MessageMixin from '@/mixins';
import { MsgTypeKV } from '@/api/socket/imClient';
import { Action, Mutation, Getter, namespace } from "vuex-class";
import { Webim } from '@/utils/types';
declare const $Vue: Vue;
declare const webim: Webim;
const userModule = namespace("userModule");

@Component<UserBonus>({
  mixins: [MessageMixin],
})
export default class UserBonus extends Vue {
  // 表示映射chat模块下的mutation方法
  @userModule.State("memberInfo") memberInfo: any;

  @Prop({})
  card: any;

  private score: string = '';

  private eventList: any = ['$setMemberScore']

  protected mounted() {
    
    this.initEvents(this.eventList);
    this.score = this.$route.params.score.toString();
  }


  private onCancel() {
    this.$router.go(-1);
    this.score = '';
  }

  private onConfirm() {
    let score = Number(this.score);

    if (Number.isNaN(score)) {
      return this.$createToast({
        txt: '请填写正确的数值',
        type: "warn",
        time: 3000
      }).show();
    }
    if (score < 0) {
      return this.$createToast({
        txt: '请填写大于等于零的整数',
        type: "warn",
        time: 3000
      }).show();
    }

    this.sendMessage(MsgTypeKV.setMemberScore, {
      imAccount: this.memberInfo.fromAccount,
      score,
    });
  }
    /**
   * 申请加入群之后的返回结果处理
   */
  private $setMemberScore(data: any) {
    if (data.result === 0) {
      this.$createToast({
        txt: data.message,
        type: "correct",
        time: 3000,
      }).show();
      this.$router.go(-1);
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="stylus" scoped>
.add-group
  width 100%
  height 100%
  background #fff
  padding 2px 
  box-sizing border-box
  .icon
    flex-basis 10%

.input-title
  font-size 12px 
  color #909090
  text-align left
  margin 12px 0 12px 5px
  
.action
  height 28px 
  width 100%
  display flex
  justify-content space-between
  align-items center
  padding 0 6px
  box-sizing border-box
  .input
    padding 0 8px
    padding-top 12px
  .item 
    width 96px
    height 100% 
    line-height 100% 
    i.fa 
      margin-right 10px
      bottom 0
    &.send 
      width 48px
      background rgb(87, 189, 109)
      border-radius 4px
      color white

</style>

